import {PickerView, PickerViewColumn, View} from '@tarojs/components'
import {inject, observer} from 'mobx-react'

import './index.less'
import LogService from "../../service/LogService";
import BaseComponent from "../BaseComponent";


@inject('store')
@observer
class Index extends BaseComponent {

  constructor() {
    super(...arguments)
    const date = new Date()
    const years = []
    const months = []
    const days = []
    for (let i = 1990; i <= date.getFullYear(); i++) {
      years.push(i)
    }
    for (let i = 1; i <= 12; i++) {
      months.push(i)
    }
    for (let i = 1; i <= 31; i++) {
      days.push(i)
    }
    this.state = {
      years: years,
      year: date.getFullYear(),
      months: months,
      month: 2,
      days: days,
      day: 2,
      value: [9999, 1, 1]
    }
  }

  componentDidMount() {
    super.componentDidMount();

    super.navigateTo("../light/index");
  }

  onChange = e => {
    const val = e.detail.value
    this.setState({
      year: this.state.years[val[0]],
      month: this.state.months[val[1]],
      day: this.state.days[val[2]],
      value: val
    })
  }

  render() {

    LogService.info("render");

    const {counterStore: {counter}} = this.props.store;
    return (
      <View className='index' style={{backgroundColor: 0xff0000, marginTop: 44}}>

        <View>{this.state.year}年{this.state.month}月{this.state.day}日</View>
        <PickerView indicatorClass='indicatorClass' className='pick_view' maskClass='mask'
                    value={this.state.value}
                    onChange={this.onChange}>
          <PickerViewColumn>
            {this.state.years.map(item => {
              return (
                <View className='pick_text'>{item}年</View>
              );
            })}
          </PickerViewColumn>
          <PickerViewColumn>
            {this.state.months.map(item => {
              return (
                <View className='pick_text'>{item}月</View>
              )
            })}
          </PickerViewColumn>
          <PickerViewColumn>
            {this.state.days.map(item => {
              return (
                <View className='pick_text'>{item}日</View>
              )
            })}
          </PickerViewColumn>
        </PickerView>
      </View>
    )
  }
}

export default Index
